/*
  学习目标：受控组件
  类似: v-model
  本质: 表单元素的value或checked属性, 受状态state的控制
  关键点: 
    1. value或checked受state的控制
    2. 配合onChange和setState修改表单元素的值

  场景:💥
    1. 收集用户输入的内容
    2. 回填表单
  注意:
  1. 👍使用onChange替代onInput
  2. 失去焦点事件变为了onBlur
*/

import React, { Component } from 'react';

export default class App extends Component {
  state = {
    name: 'zs',
  };

  render() {
    return (
      <div>
        <input
          type="text"
          //  1. value或checked受state的控制
          value={this.state.name}
          // . 2. 配合onChange和setState修改表单元素的值
          onChange={(e) => {
            this.setState({ name: e.target.value });
          }}
        />
      </div>
    );
  }
}
